<template>
	<view class="members-container">
		<!-- 顶部导航栏 -->
		<view class="header">
			<view class="header-left" @tap="goBack">
				<text class="back-icon">‹</text>
			</view>
			<view class="header-center">
				<text class="header-title">班级成员 ({{ totalMembers }})</text>
			</view>
			<view class="header-right" @tap="showAddMemberModal">
				<text class="plus-icon">+</text>
			</view>
		</view>

		<!-- 成员统计卡片 -->
		<view class="stats-card">
			<view class="stat-item">
				<text class="stat-number">{{ totalMembers }}</text>
				<text class="stat-label">总成员</text>
			</view>
			<view class="stat-item">
				<text class="stat-number">{{ onlineMembers }}</text>
				<text class="stat-label">在线</text>
			</view>
			<view class="stat-item">
				<text class="stat-number">{{ teacherCount }}</text>
				<text class="stat-label">老师</text>
			</view>
			<view class="stat-item">
				<text class="stat-number">{{ studentCount }}</text>
				<text class="stat-label">学生</text>
			</view>
		</view>

		<!-- 搜索栏 -->
		<view class="search-section">
			<view class="search-box">
				<uni-icons type="search" size="16" color="#999"></uni-icons>
				<input 
					class="search-input" 
					v-model="searchKeyword" 
					placeholder="搜索成员姓名或学号"
					@input="onSearch"
				/>
				<uni-icons v-if="searchKeyword" type="clear" size="16" color="#999" @tap="clearSearch"></uni-icons>
			</view>
		</view>

		<!-- 角色筛选 -->
		<view class="filter-section">
			<view class="filter-tabs">
				<view 
					class="filter-tab" 
					:class="{ active: currentFilter === 'all' }"
					@tap="setFilter('all')"
				>
					<text>全部</text>
				</view>
				<view 
					class="filter-tab" 
					:class="{ active: currentFilter === 'teacher' }"
					@tap="setFilter('teacher')"
				>
					<text>老师</text>
				</view>
				<view 
					class="filter-tab" 
					:class="{ active: currentFilter === 'student' }"
					@tap="setFilter('student')"
				>
					<text>学生</text>
				</view>
				<view 
					class="filter-tab" 
					:class="{ active: currentFilter === 'online' }"
					@tap="setFilter('online')"
				>
					<text>在线</text>
				</view>
			</view>
		</view>

		<!-- 成员列表 -->
		<scroll-view class="members-list" scroll-y="true">
			<!-- 管理员/老师组 -->
			<view v-if="filteredTeachers.length > 0" class="member-group">
				<view class="group-header">
					<text class="group-title">管理员 ({{ filteredTeachers.length }})</text>
				</view>
				<view 
					v-for="member in filteredTeachers" 
					:key="member.id" 
					class="member-item"
					@tap="showMemberDetail(member)"
				>
					<view class="member-avatar">
						<image v-if="member.avatar" :src="member.avatar" class="avatar-image"></image>
						<text v-else class="avatar-text">{{ member.name.charAt(0) }}</text>
						<view class="online-indicator" :class="member.status"></view>
					</view>
					<view class="member-info">
						<view class="member-name-row">
							<text class="member-name">{{ member.name }}</text>
							<view class="member-badges">
								<text v-if="member.isAdmin" class="badge admin">管理员</text>
								<text v-if="member.isTeacher" class="badge teacher">老师</text>
							</view>
						</view>
						<text class="member-role">{{ member.role }}</text>
						<text class="member-id">学号: {{ member.studentId || '教师' }}</text>
					</view>
					<view class="member-actions">
						<uni-icons type="right" size="16" color="#999"></uni-icons>
					</view>
				</view>
			</view>

			<!-- 学生组 -->
			<view v-if="filteredStudents.length > 0" class="member-group">
				<view class="group-header">
					<text class="group-title">学生 ({{ filteredStudents.length }})</text>
				</view>
				<view 
					v-for="member in filteredStudents" 
					:key="member.id" 
					class="member-item"
					@tap="showMemberDetail(member)"
				>
					<view class="member-avatar">
						<image v-if="member.avatar" :src="member.avatar" class="avatar-image"></image>
						<text v-else class="avatar-text">{{ member.name.charAt(0) }}</text>
						<view class="online-indicator" :class="member.status"></view>
					</view>
					<view class="member-info">
						<view class="member-name-row">
							<text class="member-name">{{ member.name }}</text>
							<view class="member-badges">
								<text v-if="member.isMonitor" class="badge monitor">班长</text>
								<text v-if="member.isGroupLeader" class="badge leader">组长</text>
							</view>
						</view>
						<text class="member-role">{{ member.role }}</text>
						<text class="member-id">学号: {{ member.studentId }}</text>
					</view>
					<view class="member-actions">
						<uni-icons type="right" size="16" color="#999"></uni-icons>
					</view>
				</view>
			</view>

			<!-- 空状态 -->
			<view v-if="filteredMembers.length === 0" class="empty-state">
				<uni-icons type="person" size="48" color="#ccc"></uni-icons>
				<text class="empty-text">暂无成员</text>
			</view>
		</scroll-view>

		<!-- 添加成员弹窗 -->
		<view v-if="showAddModal" class="modal-overlay" @tap="closeAddMemberModal">
			<view class="modal-content" @tap.stop>
				<view class="modal-header">
					<text class="modal-title">添加成员</text>
					<uni-icons type="close" size="20" color="#999" @tap="closeAddMemberModal"></uni-icons>
				</view>
				<view class="modal-body">
					<!-- 添加方式选择 -->
					<view class="add-method-section">
						<view class="method-tabs">
							<view 
								class="method-tab" 
								:class="{ active: addMethod === 'invite' }"
								@tap="setAddMethod('invite')"
							>
								<text>邀请码</text>
							</view>
							<view 
								class="method-tab" 
								:class="{ active: addMethod === 'search' }"
								@tap="setAddMethod('search')"
							>
								<text>搜索用户</text>
							</view>
						</view>
					</view>

					<!-- 邀请码方式 -->
					<view v-if="addMethod === 'invite'" class="invite-section">
						<view class="invite-code-card">
							<text class="invite-label">班级邀请码</text>
							<view class="invite-code-display">
								<text class="invite-code">{{ inviteCode }}</text>
								<uni-icons type="copy" size="16" color="#007AFF" @tap="copyInviteCode"></uni-icons>
							</view>
							<text class="invite-tip">分享此邀请码给其他用户，他们可以通过邀请码加入班级</text>
						</view>
						<view class="qr-code-section">
							<text class="qr-label">邀请二维码</text>
							<view class="qr-code-placeholder">
								<uni-icons type="scan" size="32" color="#007AFF"></uni-icons>
								<text class="qr-tip">点击生成二维码</text>
							</view>
						</view>
					</view>

					<!-- 搜索用户方式 -->
					<view v-if="addMethod === 'search'" class="search-section">
						<view class="search-input-group">
							<input 
								class="search-user-input" 
								v-model="searchUserKeyword" 
								placeholder="输入用户姓名或学号"
								@input="searchUsers"
							/>
							<uni-icons type="search" size="16" color="#007AFF" @tap="searchUsers"></uni-icons>
						</view>
						
						<!-- 搜索结果 -->
						<view v-if="searchResults.length > 0" class="search-results">
							<view 
								v-for="user in searchResults" 
								:key="user.id" 
								class="search-result-item"
							>
								<view class="user-avatar">
									<image v-if="user.avatar" :src="user.avatar" class="avatar-image"></image>
									<text v-else class="avatar-text">{{ user.name.charAt(0) }}</text>
								</view>
								<view class="user-info">
									<text class="user-name">{{ user.name }}</text>
									<text class="user-id">{{ user.studentId || '教师' }}</text>
								</view>
								<view class="user-actions">
									<text 
										class="add-btn" 
										:class="{ added: user.isInClass }"
										@tap="addUserToClass(user)"
									>
										{{ user.isInClass ? '已在班级' : '添加' }}
									</text>
								</view>
							</view>
						</view>
						
						<!-- 搜索空状态 -->
						<view v-else-if="hasSearched" class="search-empty">
							<text class="empty-text">未找到相关用户</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 成员详情弹窗 -->
		<view v-if="showDetailModal" class="modal-overlay" @tap="closeMemberDetail">
			<view class="modal-content detail-modal" @tap.stop>
				<view class="modal-header">
					<text class="modal-title">成员详情</text>
					<uni-icons type="close" size="20" color="#999" @tap="closeMemberDetail"></uni-icons>
				</view>
				<view class="modal-body">
					<view class="member-detail">
						<view class="detail-avatar">
							<image v-if="selectedMember.avatar" :src="selectedMember.avatar" class="avatar-image"></image>
							<text v-else class="avatar-text">{{ selectedMember.name.charAt(0) }}</text>
							<view class="online-indicator" :class="selectedMember.status"></view>
						</view>
						<view class="detail-info">
							<text class="detail-name">{{ selectedMember.name }}</text>
							<text class="detail-role">{{ selectedMember.role }}</text>
							<text class="detail-id">学号: {{ selectedMember.studentId || '教师' }}</text>
							<text class="detail-join-time">加入时间: {{ selectedMember.joinTime }}</text>
						</view>
					</view>
					<view class="detail-actions">
						<view class="action-btn" @tap="sendMessageToMember">
							<uni-icons type="chat" size="16" color="#007AFF"></uni-icons>
							<text>发送消息</text>
						</view>
						<view v-if="canManageMember" class="action-btn" @tap="showRoleModal">
							<uni-icons type="gear" size="16" color="#FF9500"></uni-icons>
							<text>设置角色</text>
						</view>
						<view v-if="canRemoveMember" class="action-btn remove" @tap="removeMember">
							<uni-icons type="trash" size="16" color="#FF3B30"></uni-icons>
							<text>移出班级</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref, computed, onMounted } from 'vue';

	// 响应式数据
	const totalMembers = ref(45);
	const onlineMembers = ref(32);
	const teacherCount = ref(3);
	const studentCount = ref(42);
	
	const searchKeyword = ref('');
	const currentFilter = ref('all');
	const addMethod = ref('invite');
	const searchUserKeyword = ref('');
	const hasSearched = ref(false);
	
	const showAddModal = ref(false);
	const showDetailModal = ref(false);
	const selectedMember = ref({});
	
	const inviteCode = ref('CLASS2024001');

	// 成员列表数据
	const members = ref([
		{
			id: 1,
			name: '张教授',
			role: '主讲教师',
			studentId: null,
			status: 'online',
			isAdmin: true,
			isTeacher: true,
			avatar: '',
			joinTime: '2024-01-01'
		},
		{
			id: 2,
			name: '李老师',
			role: '助教',
			studentId: null,
			status: 'online',
			isAdmin: false,
			isTeacher: true,
			avatar: '',
			joinTime: '2024-01-05'
		},
		{
			id: 3,
			name: '王老师',
			role: '实验教师',
			studentId: null,
			status: 'offline',
			isAdmin: false,
			isTeacher: true,
			avatar: '',
			joinTime: '2024-01-10'
		},
		{
			id: 4,
			name: '张三',
			role: '学生',
			studentId: '2025001',
			status: 'online',
			isMonitor: true,
			isGroupLeader: false,
			avatar: '',
			joinTime: '2024-01-15'
		},
		{
			id: 5,
			name: '李四',
			role: '学生',
			studentId: '2025002',
			status: 'online',
			isMonitor: false,
			isGroupLeader: true,
			avatar: '',
			joinTime: '2024-01-15'
		},
		{
			id: 6,
			name: '王五',
			role: '学生',
			studentId: '2025003',
			status: 'offline',
			isMonitor: false,
			isGroupLeader: false,
			avatar: '',
			joinTime: '2024-01-15'
		}
	]);

	// 搜索结果
	const searchResults = ref([]);

	// 计算属性
	const filteredMembers = computed(() => {
		let filtered = members.value;
		
		// 按角色筛选
		if (currentFilter.value === 'teacher') {
			filtered = filtered.filter(member => member.isTeacher);
		} else if (currentFilter.value === 'student') {
			filtered = filtered.filter(member => !member.isTeacher);
		} else if (currentFilter.value === 'online') {
			filtered = filtered.filter(member => member.status === 'online');
		}
		
		// 按搜索关键词筛选
		if (searchKeyword.value) {
			filtered = filtered.filter(member => 
				member.name.includes(searchKeyword.value) || 
				(member.studentId && member.studentId.includes(searchKeyword.value))
			);
		}
		
		return filtered;
	});

	const filteredTeachers = computed(() => {
		return filteredMembers.value.filter(member => member.isTeacher);
	});

	const filteredStudents = computed(() => {
		return filteredMembers.value.filter(member => !member.isTeacher);
	});

	const canManageMember = computed(() => {
		// 只有管理员可以管理成员
		return true; // 这里可以根据实际权限判断
	});

	const canRemoveMember = computed(() => {
		// 不能移除自己和管理员
		return selectedMember.value.id !== 1 && !selectedMember.value.isAdmin;
	});

	// 方法
	const goBack = () => {
		uni.navigateBack({
			fail: () => {
				uni.navigateTo({ url: '/pages/class/class' });
			}
		});
	};

	const onSearch = () => {
		// 搜索逻辑已在计算属性中处理
	};

	const clearSearch = () => {
		searchKeyword.value = '';
	};

	const setFilter = (filter: string) => {
		currentFilter.value = filter;
	};

	const showAddMemberModal = () => {
		showAddModal.value = true;
	};

	const closeAddMemberModal = () => {
		showAddModal.value = false;
		searchUserKeyword.value = '';
		searchResults.value = [];
		hasSearched.value = false;
	};

	const setAddMethod = (method: string) => {
		addMethod.value = method;
	};

	const copyInviteCode = () => {
		// BACKEND REQUIRED: 复制邀请码到剪贴板
		uni.setClipboardData({
			data: inviteCode.value,
			success: () => {
				uni.showToast({
					title: '邀请码已复制',
					icon: 'success'
				});
			}
		});
	};

	const searchUsers = () => {
		if (!searchUserKeyword.value.trim()) {
			uni.showToast({
				title: '请输入搜索关键词',
				icon: 'none'
			});
			return;
		}

		// BACKEND REQUIRED: GET /api/users/search?keyword={keyword}
		// 模拟搜索结果
		searchResults.value = [
			{
				id: 101,
				name: '赵六',
				studentId: '2025004',
				avatar: '',
				isInClass: false
			},
			{
				id: 102,
				name: '钱七',
				studentId: '2025005',
				avatar: '',
				isInClass: true
			}
		];
		hasSearched.value = true;
	};

	const addUserToClass = (user: any) => {
		if (user.isInClass) {
			uni.showToast({
				title: '用户已在班级中',
				icon: 'none'
			});
			return;
		}

		// BACKEND REQUIRED: POST /api/class/{classId}/members
		uni.showModal({
			title: '确认添加',
			content: `确定要将 ${user.name} 添加到班级吗？`,
			success: (res) => {
				if (res.confirm) {
					// 模拟添加成功
					user.isInClass = true;
					uni.showToast({
						title: '添加成功',
						icon: 'success'
					});
					
					// 刷新成员列表
					loadMembers();
				}
			}
		});
	};

	const showMemberDetail = (member: any) => {
		selectedMember.value = member;
		showDetailModal.value = true;
	};

	const closeMemberDetail = () => {
		showDetailModal.value = false;
		selectedMember.value = {};
	};

	const sendMessageToMember = () => {
		// BACKEND REQUIRED: 跳转到私聊页面
		uni.navigateTo({
			url: `/pages/chat/private?userId=${selectedMember.value.id}&userName=${selectedMember.value.name}`
		});
		closeMemberDetail();
	};

	const showRoleModal = () => {
		// BACKEND REQUIRED: 显示角色设置弹窗
		uni.showToast({
			title: '角色设置功能开发中',
			icon: 'none'
		});
	};

	const removeMember = () => {
		// BACKEND REQUIRED: DELETE /api/class/{classId}/members/{memberId}
		uni.showModal({
			title: '确认移除',
			content: `确定要将 ${selectedMember.value.name} 移出班级吗？`,
			success: (res) => {
				if (res.confirm) {
					// 模拟移除成功
					members.value = members.value.filter(member => member.id !== selectedMember.value.id);
					uni.showToast({
						title: '移除成功',
						icon: 'success'
					});
					closeMemberDetail();
					
					// 更新统计数据
					updateStats();
				}
			}
		});
	};

	const loadMembers = () => {
		// BACKEND REQUIRED: GET /api/class/{classId}/members
		// 这里应该从后端获取成员列表
		console.log('加载成员列表');
	};

	const updateStats = () => {
		// BACKEND REQUIRED: GET /api/class/{classId}/members/stats
		totalMembers.value = members.value.length;
		onlineMembers.value = members.value.filter(member => member.status === 'online').length;
		teacherCount.value = members.value.filter(member => member.isTeacher).length;
		studentCount.value = members.value.filter(member => !member.isTeacher).length;
	};

	onMounted(() => {
		loadMembers();
		updateStats();
	});
</script>

<style>
	page {
		background-color: #f5f5f5;
	}

	.members-container {
		min-height: 100vh;
		background-color: #f5f5f5;
		display: flex;
		flex-direction: column;
	}

	/* 顶部导航栏 */
	.header {
		background: linear-gradient(135deg, #007AFF, #5856D6);
		padding: 20rpx 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: relative;
	}

	.header-left {
		display: flex;
		align-items: center;
		padding: 10rpx;
		background: rgba(255, 255, 255, 0.1);
		border-radius: 50%;
		min-width: 60rpx;
		min-height: 60rpx;
		justify-content: center;
	}

	.back-icon {
		font-size: 36rpx;
		color: #fff;
		font-weight: bold;
		line-height: 1;
	}

	.header-center {
		flex: 1;
		text-align: center;
	}

	.header-title {
		font-size: 32rpx;
		color: #fff;
		font-weight: bold;
	}

	.header-right {
		display: flex;
		align-items: center;
		padding: 10rpx;
		background: rgba(255, 255, 255, 0.1);
		border-radius: 50%;
		min-width: 60rpx;
		min-height: 60rpx;
		justify-content: center;
	}

	.plus-icon {
		font-size: 32rpx;
		color: #fff;
		font-weight: bold;
		line-height: 1;
	}

	/* 统计卡片 */
	.stats-card {
		background: #fff;
		margin: 20rpx;
		border-radius: 16rpx;
		padding: 30rpx;
		display: flex;
		justify-content: space-around;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
	}

	.stat-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 8rpx;
	}

	.stat-number {
		font-size: 36rpx;
		font-weight: bold;
		color: #007AFF;
	}

	.stat-label {
		font-size: 24rpx;
		color: #666;
	}

	/* 搜索栏 */
	.search-section {
		padding: 0 20rpx 20rpx;
	}

	.search-box {
		background: #fff;
		border-radius: 24rpx;
		padding: 20rpx;
		display: flex;
		align-items: center;
		gap: 20rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
	}

	.search-input {
		flex: 1;
		font-size: 28rpx;
		background: transparent;
		border: none;
		outline: none;
	}

	/* 筛选栏 */
	.filter-section {
		padding: 0 20rpx 20rpx;
	}

	.filter-tabs {
		background: #fff;
		border-radius: 16rpx;
		display: flex;
		overflow: hidden;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
	}

	.filter-tab {
		flex: 1;
		padding: 20rpx;
		text-align: center;
		font-size: 28rpx;
		color: #666;
		background: #fff;
		transition: all 0.3s;
	}

	.filter-tab.active {
		background: #007AFF;
		color: #fff;
	}

	/* 成员列表 */
	.members-list {
		flex: 1;
		padding: 0 20rpx;
	}

	.member-group {
		margin-bottom: 30rpx;
	}

	.group-header {
		padding: 20rpx 0;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.group-title {
		font-size: 28rpx;
		color: #666;
		font-weight: 500;
	}

	.member-item {
		background: #fff;
		margin-bottom: 2rpx;
		padding: 20rpx;
		display: flex;
		align-items: center;
		gap: 20rpx;
		border-radius: 12rpx;
	}

	.member-avatar {
		position: relative;
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		background: #f0f0f0;
		display: flex;
		align-items: center;
		justify-content: center;
		overflow: hidden;
	}

	.avatar-image {
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}

	.avatar-text {
		font-size: 32rpx;
		color: #666;
		font-weight: bold;
	}

	.online-indicator {
		position: absolute;
		bottom: 4rpx;
		right: 4rpx;
		width: 20rpx;
		height: 20rpx;
		border-radius: 50%;
		border: 3rpx solid #fff;
	}

	.online-indicator.online {
		background: #34C759;
	}

	.online-indicator.offline {
		background: #ccc;
	}

	.member-info {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: 4rpx;
	}

	.member-name-row {
		display: flex;
		align-items: center;
		gap: 10rpx;
	}

	.member-name {
		font-size: 30rpx;
		color: #333;
		font-weight: 500;
	}

	.member-badges {
		display: flex;
		gap: 8rpx;
	}

	.badge {
		padding: 4rpx 8rpx;
		border-radius: 8rpx;
		font-size: 20rpx;
		color: #fff;
	}

	.badge.admin {
		background: #FF3B30;
	}

	.badge.teacher {
		background: #007AFF;
	}

	.badge.monitor {
		background: #FF9500;
	}

	.badge.leader {
		background: #34C759;
	}

	.member-role {
		font-size: 24rpx;
		color: #666;
	}

	.member-id {
		font-size: 22rpx;
		color: #999;
	}

	.member-actions {
		display: flex;
		align-items: center;
	}

	/* 空状态 */
	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 100rpx 0;
		gap: 20rpx;
	}

	.empty-text {
		font-size: 28rpx;
		color: #999;
	}

	/* 弹窗样式 */
	.modal-overlay {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 1000;
	}

	.modal-content {
		background: #fff;
		border-radius: 16rpx;
		width: 90%;
		max-width: 600rpx;
		max-height: 80vh;
	}

	.detail-modal {
		max-width: 500rpx;
	}

	.modal-header {
		padding: 30rpx;
		border-bottom: 1rpx solid #f0f0f0;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.modal-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}

	.modal-body {
		padding: 30rpx;
		max-height: 60vh;
		overflow-y: auto;
	}

	/* 添加成员弹窗样式 */
	.add-method-section {
		margin-bottom: 30rpx;
	}

	.method-tabs {
		display: flex;
		background: #f5f5f5;
		border-radius: 12rpx;
		overflow: hidden;
	}

	.method-tab {
		flex: 1;
		padding: 20rpx;
		text-align: center;
		font-size: 28rpx;
		color: #666;
		transition: all 0.3s;
	}

	.method-tab.active {
		background: #007AFF;
		color: #fff;
	}

	.invite-section {
		display: flex;
		flex-direction: column;
		gap: 30rpx;
	}

	.invite-code-card {
		background: #f8f9fa;
		border-radius: 12rpx;
		padding: 30rpx;
		border: 2rpx solid #e9ecef;
	}

	.invite-label {
		font-size: 28rpx;
		color: #333;
		font-weight: 500;
		margin-bottom: 20rpx;
		display: block;
	}

	.invite-code-display {
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: #fff;
		padding: 20rpx;
		border-radius: 8rpx;
		margin-bottom: 20rpx;
	}

	.invite-code {
		font-size: 32rpx;
		font-weight: bold;
		color: #007AFF;
		font-family: monospace;
	}

	.invite-tip {
		font-size: 24rpx;
		color: #666;
		line-height: 1.4;
	}

	.qr-code-section {
		text-align: center;
	}

	.qr-label {
		font-size: 28rpx;
		color: #333;
		font-weight: 500;
		margin-bottom: 20rpx;
		display: block;
	}

	.qr-code-placeholder {
		background: #f8f9fa;
		border: 2rpx dashed #dee2e6;
		border-radius: 12rpx;
		padding: 60rpx 40rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 20rpx;
	}

	.qr-tip {
		font-size: 24rpx;
		color: #666;
	}

	/* 搜索用户样式 */
	.search-input-group {
		display: flex;
		align-items: center;
		gap: 20rpx;
		background: #f8f9fa;
		border-radius: 12rpx;
		padding: 20rpx;
		margin-bottom: 30rpx;
	}

	.search-user-input {
		flex: 1;
		font-size: 28rpx;
		background: transparent;
		border: none;
		outline: none;
	}

	.search-results {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}

	.search-result-item {
		display: flex;
		align-items: center;
		gap: 20rpx;
		padding: 20rpx;
		background: #f8f9fa;
		border-radius: 12rpx;
	}

	.user-avatar {
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		background: #e9ecef;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.user-info {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: 4rpx;
	}

	.user-name {
		font-size: 28rpx;
		color: #333;
		font-weight: 500;
	}

	.user-id {
		font-size: 24rpx;
		color: #666;
	}

	.add-btn {
		padding: 10rpx 20rpx;
		background: #007AFF;
		color: #fff;
		border-radius: 8rpx;
		font-size: 24rpx;
	}

	.add-btn.added {
		background: #ccc;
		color: #666;
	}

	.search-empty {
		text-align: center;
		padding: 60rpx 0;
	}

	/* 成员详情样式 */
	.member-detail {
		display: flex;
		align-items: center;
		gap: 30rpx;
		margin-bottom: 40rpx;
	}

	.detail-avatar {
		position: relative;
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		background: #f0f0f0;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.detail-info {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: 8rpx;
	}

	.detail-name {
		font-size: 36rpx;
		color: #333;
		font-weight: bold;
	}

	.detail-role {
		font-size: 28rpx;
		color: #666;
	}

	.detail-id, .detail-join-time {
		font-size: 24rpx;
		color: #999;
	}

	.detail-actions {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}

	.action-btn {
		display: flex;
		align-items: center;
		gap: 20rpx;
		padding: 20rpx;
		background: #f8f9fa;
		border-radius: 12rpx;
		font-size: 28rpx;
		color: #333;
	}

	.action-btn.remove {
		background: #fff5f5;
		color: #FF3B30;
	}
</style>
